<template>
    <div :class="'uni-keyboard ' + (!show?'uni-keyboard-hide':'')">
        <div class="uni-keyboard-head">
            <text @click="complete">完成</text>
        </div>
        <div class="uni-keyboard-body">
            <div class="uni-keyboard-type" v-show="type == 1">
                <div class="uni-keyboard-body-line" v-for="(group,i) in keyboardProvince" :key="i">
                    <div hover-class="uni-keyboard-keycap-hover" @click="hitKeycap(i,j)"
                         class="uni-keyboard-keycap"
                         v-for="(item,j) in group" :key="j">{{item}}
                    </div>
                </div>
                <div class="uni-keyboard-delete" @click="hitDelete"></div>
            </div>
            <div class="uni-keyboard-type" v-show="type != 1">
                <div class="uni-keyboard-body-line" v-for="(group,i) in keyboardValue" :key="i">
                    <div hover-class="uni-keyboard-keycap-hover" @click="hitKeycap(i,j)"
                         class="uni-keyboard-keycap"
                         v-for="(item,j) in group" :key="j">{{item}}
                    </div>
                </div>
                <div class="uni-keyboard-delete" @click="hitDelete"></div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">

    import {Component, Prop, Vue, Watch, Emit} from "vue-property-decorator";


    @Component({})
    //车牌号虚拟键盘
    export default class plateKeyboard extends Vue {
        //键盘类型 1、省份键盘 2、数字英文键盘
        @Prop({default: 1, type: Number})
        public type!: number;
        //显示键盘 true false
        @Prop({default: true, type: Boolean})
        public show!: boolean;

        private keyboardProvince: Array<Array<string>> = [
            ["京", "津", "沪", "渝", "冀", "豫", "云", "辽", "黑", "湘"],
            ["皖", "鲁", "新", "苏", "浙", "赣", "鄂", "桂", "甘", "晋"],
            ["蒙", "陕", "吉", "闽", "贵", "粤", "青", "藏"],
            ["川", "宁", "琼", "港", "澳", "台"]
        ];
        private keyboardValue: Array<Array<string | number>> = [
            [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
            ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
            ["A", "S", "D", "F", "G", "H", "J", "K", "L"],
            ["Z", "X", "C", "V", "B", "N", "M"]
        ];

        private hitKeycap(i: number, j: number) {
            let value: any = "";
            if (this.type == 1) {
                value = this.keyboardProvince[i][j]

            } else {
                value = this.keyboardValue[i][j]
            }
            this.hit(value);
        }

        //点击键盘回调，会直接返回点击内容,键盘类型用type自行判断
        //@arg value:点击内容，点击删除返回的是delete
        @Emit("hit")
        private hit(value: any) {
        }

        // 点击完成的回调
        @Emit("complete")
        private complete(): void {
        }

        private hitDelete() {
            this.hit("delete");
        }


    }
</script>

<style scoped lang="stylus">
    @import "style/compatible-safe-area.styl"
    .uni-keyboard
        padding-bottom: var(--safe-area-inset-bottom);
        width: 100%;
        height: 232px;
        position: fixed;
        bottom: 0;
        background: #cfd4db;
        border-top: 1px solid #eeeeee;
        overflow: hidden;
        transition: height .2s ease-in;


    .uni-keyboard-hide
        height: 0;


    .uni-keyboard-head
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 35px;
        background-color: #FFFFFF;
        font-size: 16px;
        color: #0099FF;


    .uni-keyboard-head text
        margin-right: 17px;
        display: inline-block;
        font-size: 15px;


    .uni-keyboard-body,
    .uni-keyboard-type
        position: relative;


    .uni-keyboard-body-line
        text-align: center;


    .uni-keyboard-keycap
        text-decoration: none;
        width: 32px;
        height: 42.5px;
        display: inline-block;
        font-size: 18px;
        text-align: center;
        line-height: 42.5px;
        background-color: #fff;
        margin: 4px 2.5px;
        border-radius: 4px;
        box-shadow: 0 1px 0 #888992;
        font-weight: 500;

    .uni-keyboard-delete
        background: url(' + PHRpdGxlPuWIoOmZpDwvdGl0bGU + PGRlZnM + PHBhdGggZD0iTTUgMGg0MWE1IDUgMCAwIDEgNSA1djMyLjVhNSA1IDAgMCAxLTUgNUg1YTUgNSAwIDAgMS01LTVWNWE1IDUgMCAwIDEgNS01eiIgaWQ9ImIiLz48ZmlsdGVyIHg9Ii0xJSIgeT0iLTEuMiUiIHdpZHRoPSIxMDIlIiBoZWlnaHQ9IjEwNC43JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI + PGZlT2Zmc2V0IGR5PSIxIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8 + PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAuNTI1NDkwMTk2IDAgMCAwIDAgMC41MzcyNTQ5MDIgMCAwIDAgMCAwLjU1Njg2Mjc0NSAwIDAgMCAxIDAiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM + PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSguNSAuNSkiPjx1c2UgZmlsbD0iIzAwMCIgZmlsdGVyPSJ1cmwoI2EpIiB4bGluazpocmVmPSIjYiIvPjx1c2UgZmlsbD0iI0E4QjBCRCIgeGxpbms6aHJlZj0iI2IiLz48L2c + PGcgZmlsbC1ydWxlPSJub256ZXJvIj48cGF0aCBkPSJNMTEuMjAzIDIxLjMzOGExIDEgMCAwIDAgLjAxMyAxLjIyNWw2Ljc2OCA4LjU1N2ExIDEgMCAwIDAgLjc4NS4zOGgxOS4zNGEzIDMgMCAwIDAgMy0zVjE1YTMgMyAwIDAgMC0zLTNIMTguNzhhMSAxIDAgMCAwLS43OTcuMzk2bC02Ljc4IDguOTQyeiIgc3Ryb2tlPSIjMTcxODFEIiBzdHJva2Utd2lkdGg9IjIiLz48cGF0aCBkPSJNMjkuNDUgMjEuNTQ2bDIuNzggMi44MjNhMSAxIDAgMCAxLTEuNDI1IDEuNDA0bC0yLjc4LTIuODIzLTIuODIzIDIuNzhhMSAxIDAgMCAxLTEuNDA0LTEuNDI1bDIuODIzLTIuNzgtMi43OC0yLjgyM2ExIDEgMCAwIDEgMS40MjUtMS40MDRsMi43OCAyLjgyMyAyLjgyMy0yLjc4YTEgMSAwIDAgMSAxLjQwNCAxLjQyNWwtMi44MjMgMi43OHoiIGZpbGw9IiMxNzE4MUQiLz48L2c+PC9nPjwvc3ZnPg==') no-repeat 90%;
        height: 42.5px;
        position: absolute;
        width: 52.5px;
        right: 4px;
        bottom: 4px;
        border-radius: 4px;


    .uni-keyboard-keycap-hover
        background: rgb(110, 119, 142);

</style>